import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import './classification_right_two.scss';
import Mock from 'mockjs';
import axios from 'axios';

Mock.mock(/getstyledata/, {
    "data|6": [{
        "msg|1": ['现代风格', '欧式风格', '韩式风格', '田园风格', '亦是风格', '南宋风格'],
        "img|1": require('../../../static/img/classification/content-1.jpg'), "routername": '/homelist'
    }],
    "gongneng|4": [{
        "msg|1": ['榻榻米', '书柜组合', '书桌组合', '多功能组合', '方法组合', '我的组合'],
        "img|1": require('../../../static/img/classification/content-1.jpg'), "routername": '/homelist'
    }]
})  
 

class ClassificationRight extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: {
                style: [],
                gongneng: []
            }
        }
    }

    componentWillReceiveProps(object,nextProps) {
        if (this.props.listskey) {
            this.getlistsdata(this.props.listskey);
        }
    }

    componentDidMount() {
        this.getlistsdata(this.props.listskey);
    }

    getlistsdata(key) {
        axios.get('/getstyledata/').then(res => {
            this.setState({
                data: {
                    style: res.data.data,
                    gongneng: res.data.gongneng
                }
            });
        });
    }

    render() {
        return (
            <div className="ClassificationRight">
                <div className="ClassificationRight_title clearfix">
                    <h3>风格</h3>
                    <Link to="/homelist">查看全部 ></Link>
                </div>
                <ul className="ClassificationRight_content">
                    {this.state.data.style && this.state.data.style.map((item, key) =>
                        <li key={key}>
                            <Link to={item.routername}>
                                <img alt="" src={item.img} />
                                <div>{item.msg}</div>
                            </Link>
                        </li>
                    )}
                </ul>
                <div className="ClassificationRight_title clearfix">
                    <h3>功能</h3>
                    <Link to="/homelist">查看全部 ></Link>
                </div>
                <ul className="ClassificationRight_content">
                    {this.state.data.gongneng && this.state.data.gongneng.map((item, key) =>
                        <li key={key}>
                            <Link to={item.routername}>
                                <img alt="" src={item.img} />
                                <div>{item.msg}</div>
                            </Link>
                        </li>
                    )}
                </ul>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    let listskey = state.proClassification.key;
    return {
        listskey: listskey
    }
}

export default connect(mapStateToProps)(ClassificationRight);